<!--
 * @Description: description
 * @version: 0.1
 * @Author: youhuimin
 * @Date: 2021-08-17 17:50:03
 * @LastEditors: youhuimin
 * @LastEditTime: 2021-09-08 14:41:52
 * @FilePath: \xdeas-user-web\src\components\roomTree\index222.vue
-->
<template>
  <div style="width:100%">
    <div v-if="showSearch" class="mb-16">
      <a-input-search
        style="width:100%;"
        placeholder="搜索区域"
        v-model="searchValue"
        enter-button
        @search="onSearch"
      />
    </div>
    <div class="mb-8 fs-12" v-if="max != -1">
      <span class="c-909399">
        {{ maxTip }}
      </span>
      <span class="c-606266">{{ deviceValue.length || 0 }}/{{ max }}</span>
    </div>
    <leftTree
      :value="value"
      :list="treeData"
      :type="type"
      v-model="deviceValue"
      :unableValue="disableValue"
      :default-expand="defaultExpand"
      @change="handleChange"
      :max="max"
      ref="tree"
    ></leftTree>
    <template v-if="treeData.length == 0">
      <div class="flex-c pb-20">暂无数据</div>
    </template>
  </div>
</template>

<script>
let imgRoom = require("../../assets/images/deviceMonitor/local.png");
import leftTree from "./leftTree.vue";
import treeTools from "./treeTools.js";
export default {
  data() {
    return {
      imgRoom,
      treeData: [],
      userInfo: {},
      deviceValue: [], //选中的设备
      defaultExpand: [], //默认展开节点
      disableValue: [], //不可选中的节点
      deviceObj: [],
      searchValue: "",
      orignData: "",
    };
  },
  components: {
    leftTree,
  },
  watch: {
    value(val) {
      if (val == this.deviceValue) return;
      this.deviceValue = val;
    },
  },
  props: {
    value: {},
    showSearch: {
      type: Boolean,
      default: false,
    },
    showAll: {
      type: Boolean,
      default: true,
    },
    //不可选中节点条件
    disableFuc: {
      type: Function,
      default: null,
    },
    //第一个选中的方法
    firstSelFuc: {
      type: Function,
      default: null,
    },
    // 显示地点图标的条件
    // iconShowFuc:{
    //   type:Function,
    //   default:null,
    // },
    type: {
      type: String,
      default: "radio", //checkbox 单选和多选
    },
    dataType: {
      type: String,
      default: "ELEC_METER", //树的数据类型  带电表的  仅机房 的  room
    },
    max: {
      type: [String, Number],
      default: -1,
    },
    maxTip: {
      type: String,
      default: "已选择：",
    },
  },
  methods: {
    init() {

        this.treeData = [{
            "createDate": "2021-04-20T09:31:28.001",
            "creater": "115510501659643904",
            "description": "我是全厂区哥哥",
            "id": "153796269314150400",
            "imgs": ["https://oss.xdeas.com.cn/systemWeb/153796267909058560/16311549904825.jpg"],
            "level": 1,
            "name": "全厂区的",
            "orgId": "153796267909058560",
            "sortNo": 1,
            "status": 1,
            "subRooms": [{
                "createDate": "2021-09-05T11:54:17.585",
                "creater": "115510501659643904",
                "description": "",
                "id": "203841738207399936",
                "imgs": [],
                "level": 2,
                "name": "这是新增加",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 1,
                "status": 1,
                "subRooms": [{"createDate": "2021-09-02T19:20:35.863", "creater": "115510501659643904", "description": "223456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567891", "id": "202866890853322752", "imgs": [], "level": 3, "name": "吊袜带", "orgId": "153796267909058560", "parentId": "203841738207399936", "sortNo": 5, "status": 1, "subRooms": []}]
            }, {
                "createDate": "2021-08-30T16:47:50.047",
                "creater": "115510501659643904",
                "description": "这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432这是区域描述3213231432",
                "id": "201741283033616384",
                "imgs": ["https://oss.xdeas.com.cn/systemWeb/153796267909058560/163031327144852.png"],
                "level": 2,
                "name": "这是区33域",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 2,
                "status": 1,
                "subRooms": [{
                    "createDate": "2021-08-31T15:59:35.426",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "202091529978777600",
                    "imgs": ["https://oss.xdeas.com.cn/systemWeb/153796267909058560/163056996031564.jpg", "https://oss.xdeas.com.cn/systemWeb/153796267909058560/163056997343932.jpg", "https://oss.xdeas.com.cn/systemWeb/153796267909058560/163056997342188.jpg"],
                    "level": 3,
                    "name": "我是第三v吃不吃v不错v宝宝",
                    "orgId": "153796267909058560",
                    "parentId": "201741283033616384",
                    "sortNo": 1,
                    "status": 1,
                    "subRooms": [{"createDate": "2021-07-13T11:22:12.476", "creater": "115510501659643904", "description": "", "id": "184264718972620800", "imgs": [], "level": 4, "name": "<而家木木地狱下太卡>替我通过", "orgId": "153796267909058560", "parentId": "202091529978777600", "sortNo": 1, "status": 1, "subRooms": []}]
                }, {"createDate": "2021-09-03T11:31:06.469", "creater": "115510501659643904", "description": "", "id": "203111127729573888", "imgs": [], "level": 3, "name": "88888", "orgId": "153796267909058560", "parentId": "201741283033616384", "sortNo": 2, "status": 1, "subRooms": []}, {"createDate": "2021-09-03T15:32:29.514", "creater": "115510501659643904", "description": "", "id": "203171874006372352", "imgs": [], "level": 3, "name": "测试新增之后.列表更新", "orgId": "153796267909058560", "parentId": "201741283033616384", "sortNo": 3, "status": 1, "subRooms": []}, {
                    "createDate": "2021-09-03T09:48:27.825",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "203085296487632896",
                    "imgs": [],
                    "level": 3,
                    "name": "这是刚刚新增",
                    "orgId": "153796267909058560",
                    "parentId": "201741283033616384",
                    "sortNo": 4,
                    "status": 1,
                    "subRooms": []
                }, {"createDate": "2021-09-03T15:39:54.899", "creater": "115510501659643904", "description": "很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增很长很长的新增", "id": "203173742086459392", "imgs": [], "level": 3, "name": "啊", "orgId": "153796267909058560", "parentId": "201741283033616384", "sortNo": 5, "status": 1, "subRooms": []}]
            }, {"createDate": "2021-09-04T10:36:39.892", "creater": "115510501659643904", "description": "", "id": "203459814578196480", "imgs": [], "level": 2, "name": "大王的", "orgId": "153796267909058560", "parentId": "153796269314150400", "sortNo": 3, "status": 1, "subRooms": [{"createDate": "2021-09-06T13:59:44.273", "creater": "115510501659643904", "description": "年会", "id": "204235695290585088", "imgs": ["https://oss.xdeas.com.cn/room/163090798076426.png"], "level": 3, "name": "one", "orgId": "153796267909058560", "parentId": "203459814578196480", "sortNo": 1, "status": 0, "subRooms": []}]}, {
                "createDate": "2021-09-02T14:16:43.292",
                "creater": "115510501659643904",
                "description": "飒飒大大",
                "id": "202790417903652864",
                "imgs": ["https://oss.xdeas.com.cn/systemWeb/153796267909058560/163056340005283.jpg", "https://oss.xdeas.com.cn/systemWeb/153796267909058560/1630563400055111.jpg", "https://oss.xdeas.com.cn/systemWeb/153796267909058560/16305634000478.jpg"],
                "level": 2,
                "name": "四级区域",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 4,
                "status": 1,
                "subRooms": [{"createDate": "2021-09-02T14:23:02.564", "creater": "115510501659643904", "description": "", "id": "202792008685719552", "imgs": [], "level": 3, "name": "分公司的给", "orgId": "153796267909058560", "parentId": "202790417903652864", "sortNo": 1, "status": 1, "subRooms": [{"createDate": "2021-09-15T11:29:21.253", "creater": "115510501659643904", "description": "", "id": "207459340800495616", "imgs": [], "level": 4, "name": "区域", "orgId": "153796267909058560", "parentId": "202792008685719552", "sortNo": 1, "status": 1, "subRooms": []}]}, {
                    "createDate": "2021-09-02T14:17:34.199",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "202790631423086592",
                    "imgs": [],
                    "level": 3,
                    "name": "五级区域",
                    "orgId": "153796267909058560",
                    "parentId": "202790417903652864",
                    "sortNo": 2,
                    "status": 1,
                    "subRooms": [{"createDate": "2021-09-04T11:02:11.915", "creater": "115510501659643904", "description": "", "id": "203466240331616256", "imgs": [], "level": 4, "name": "这是新增的", "orgId": "153796267909058560", "parentId": "202790631423086592", "sortNo": 1, "status": 1, "subRooms": []}, {"createDate": "2021-09-06T14:04:21.015", "creater": "115510501659643904", "description": "", "id": "204236856030662656", "imgs": [], "level": 4, "name": "又卡了特色阿萨屙角色咯破发热二了阿萨特朗普热假的色就是色啊咩", "orgId": "153796267909058560", "parentId": "202790631423086592", "sortNo": 2, "status": 1, "subRooms": []}]
                }]
            }, {
                "createDate": "2021-06-02T18:13:16.539",
                "creater": "115510501659643904",
                "description": "",
                "id": "169510265061117952",
                "imgs": [],
                "level": 2,
                "name": "明日黄花好啊2",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 5,
                "status": 1,
                "subRooms": [{"createDate": "2021-09-01T11:09:34.616", "creater": "115510501659643904", "description": "", "id": "202380933557391360", "imgs": [], "level": 3, "name": "我又是第", "orgId": "153796267909058560", "parentId": "169510265061117952", "sortNo": 1, "status": 1, "subRooms": []}, {
                    "createDate": "2021-09-03T16:14:28.875",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "203182440972292096",
                    "imgs": [],
                    "level": 3,
                    "name": "吊袜带222",
                    "orgId": "153796267909058560",
                    "parentId": "169510265061117952",
                    "sortNo": 2,
                    "status": 1,
                    "subRooms": [{"createDate": "2021-09-08T15:27:02.458", "creater": "115510501659643904", "description": "", "id": "204982441562083328", "imgs": [], "level": 4, "name": "侧边新增", "orgId": "153796267909058560", "parentId": "203182440972292096", "sortNo": 1, "status": 0, "subRooms": []}]
                }, {"createDate": "2021-09-02T15:36:32.262", "creater": "115510501659643904", "description": "", "id": "202810504299679744", "imgs": [], "level": 3, "name": "阿达伟大人阿达伟大人阿达伟大人阿达伟大人阿达伟大21达伟大人", "orgId": "153796267909058560", "parentId": "169510265061117952", "sortNo": 2, "status": 1, "subRooms": []}, {
                    "createDate": "2021-08-30T16:47:23.273",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "201741170735321088",
                    "imgs": [],
                    "level": 3,
                    "name": "321但是发射点发飞洒发生飞洒发发",
                    "orgId": "153796267909058560",
                    "parentId": "169510265061117952",
                    "sortNo": 2,
                    "status": 1,
                    "subRooms": [{"createDate": "2021-09-02T11:50:07.972", "creater": "115510501659643904", "description": "123", "id": "202753527657795584", "imgs": [], "level": 4, "name": "区域区域区域区域区域区域", "orgId": "153796267909058560", "parentId": "201741170735321088", "sortNo": 2, "status": 1, "subRooms": []}]
                }]
            }, {"createDate": "2021-09-08T14:27:46.291", "creater": "115510501659643904", "description": "", "id": "204967525920804864", "imgs": [], "level": 2, "name": "这是我随便添加333", "orgId": "153796267909058560", "parentId": "153796269314150400", "sortNo": 7, "status": 1, "subRooms": []}, {"createDate": "2021-09-08T17:16:59.098", "creater": "115510501659643904", "description": "", "id": "205010109875621888", "imgs": [], "level": 2, "name": "大大大", "orgId": "153796267909058560", "parentId": "153796269314150400", "sortNo": 8, "status": 1, "subRooms": []}, {
                "createDate": "2021-09-15T14:08:14.622",
                "creater": "115510501659643904",
                "description": "321321321",
                "id": "207499326639837184",
                "imgs": [],
                "level": 2,
                "name": "这是我随便添加的",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 9,
                "status": 1,
                "subRooms": []
            }, {"createDate": "2021-09-27T10:37:36.136", "creater": "115510501659643904", "description": "", "id": "211794971374653440", "imgs": [], "level": 2, "name": "新车间", "orgId": "153796267909058560", "parentId": "153796269314150400", "sortNo": 17, "status": 0, "subRooms": [{"createDate": "2021-09-27T10:37:45.033", "creater": "115510501659643904", "description": "", "id": "211795008691376128", "imgs": [], "level": 3, "name": "老空压机房", "orgId": "153796267909058560", "parentId": "211794971374653440", "sortNo": 1, "status": 0, "subRooms": []}]}, {
                "createDate": "2021-09-27T10:41:04.241",
                "creater": "115510501659643904",
                "description": "",
                "id": "211795844234481664",
                "imgs": [],
                "level": 2,
                "name": "综合楼",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 18,
                "status": 0,
                "subRooms": [{"createDate": "2021-09-27T10:41:14.282", "creater": "115510501659643904", "description": "", "id": "211795886345293824", "imgs": [], "level": 3, "name": "综合楼电房", "orgId": "153796267909058560", "parentId": "211795844234481664", "sortNo": 1, "status": 0, "subRooms": []}, {"createDate": "2021-09-27T10:43:22.452", "creater": "115510501659643904", "description": "", "id": "211796423929237504", "imgs": [], "level": 3, "name": "综合楼一楼电柜", "orgId": "153796267909058560", "parentId": "211795844234481664", "sortNo": 2, "status": 0, "subRooms": []}, {
                    "createDate": "2021-09-27T10:46:54.350",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "211797312693866496",
                    "imgs": [],
                    "level": 3,
                    "name": "综合楼一楼车间",
                    "orgId": "153796267909058560",
                    "parentId": "211795844234481664",
                    "sortNo": 3,
                    "status": 0,
                    "subRooms": []
                }, {"createDate": "2021-09-27T10:47:26.201", "creater": "115510501659643904", "description": "", "id": "211797446286643200", "imgs": [], "level": 3, "name": "综合楼三楼", "orgId": "153796267909058560", "parentId": "211795844234481664", "sortNo": 19, "status": 1, "subRooms": []}, {"createDate": "2021-09-27T10:48:10.697", "creater": "115510501659643904", "description": "", "id": "211797632916393984", "imgs": [], "level": 3, "name": "综合楼四楼", "orgId": "153796267909058560", "parentId": "211795844234481664", "sortNo": 20, "status": 0, "subRooms": []}, {
                    "createDate": "2021-09-27T10:48:41.657",
                    "creater": "115510501659643904",
                    "description": "",
                    "id": "211797762772045824",
                    "imgs": [],
                    "level": 3,
                    "name": "综合楼六楼",
                    "orgId": "153796267909058560",
                    "parentId": "211795844234481664",
                    "sortNo": 21,
                    "status": 0,
                    "subRooms": []
                }]
            }, {"createDate": "2021-09-27T10:49:54.786", "creater": "115510501659643904", "description": "", "id": "211798069497303040", "imgs": [], "level": 2, "name": "老电房", "orgId": "153796267909058560", "parentId": "153796269314150400", "sortNo": 19, "status": 0, "subRooms": [{"createDate": "2021-09-27T10:50:12.111", "creater": "115510501659643904", "description": "", "id": "211798142163619840", "imgs": [], "level": 3, "name": "老电房", "orgId": "153796267909058560", "parentId": "211798069497303040", "sortNo": 1, "status": 0, "subRooms": []}]}, {
                "createDate": "2021-09-27T10:51:04.183",
                "creater": "115510501659643904",
                "description": "",
                "id": "211798360569417728",
                "imgs": [],
                "level": 2,
                "name": "老车间",
                "orgId": "153796267909058560",
                "parentId": "153796269314150400",
                "sortNo": 20,
                "status": 0,
                "subRooms": [{"createDate": "2021-09-27T10:51:17.124", "creater": "115510501659643904", "description": "", "id": "211798414847905792", "imgs": [], "level": 3, "name": "一楼电房", "orgId": "153796267909058560", "parentId": "211798360569417728", "sortNo": 1, "status": 0, "subRooms": []}]
            }],
            "type": "1"
        }]
      // if (this.dataType == "room") {
      //   this.onlyRoomData();
      // } else {
      //   this.getEngineroom();
      // }
    },
    // 是从设备监测调用的 树的数据 是只有机房没有设备
    onlyRoomData() {
      this.$axios
        .get(this.$url.selectEngineroomByOrg, {
          params: {
            orgId: this.userInfo.currentUserDTO.organizationId,
          },
        })
        .then((data) => {
          // data.data.push({ name: "未关联机房", id: 0 ,subRooms: []});
          // let tree = [
          //   {
          //     name:'全部',
          //     id:"all",
          //     engineroomAndDeviceEnum:'ROOM',
          //     subRooms:data.data,
          //   }
          // ]
          let tree = data.data;
          // 给节点加上parentId
          this.initTree(tree, "0");
          // console.log(tree,'treetreetree');
          this.treeData = tree || [];
          // 设定第一个选中的node
          if (this.firstSelFuc) {
            this.setFirstNode(tree, this.firstSelFuc);
          }
          this.orignData = JSON.stringify(this.treeData);
        });
    },
    // 根据dataType获取机房和设备
    getEngineroom() {
      this.$axios
        .get(this.$url.selectEngineRoomDeviceByOrganizationId, {
          params: {
            organizationId: this.userInfo.currentUserDTO.organizationId,
            typeProperty: this.dataType,
          },
        })
        .then((data) => {
          //去除无关联机房
          let tree = data.data.filter((v) => {
            return !!v.id;
          });
          // 给节点加上parentId
          this.initTree(tree, "all");

          this.treeData = tree || [];
          // 设定第一个选中的node
          if (this.firstSelFuc) {
            this.setFirstNode(tree, this.firstSelFuc);
          }
          this.orignData = JSON.stringify(this.treeData);
        });
    },
    // 加上parentId
    initTree(arr, parentId) {
      arr.forEach((v, i) => {
        // if(!v.id && v.name == "未关联机房"){
        //   v.engineroomAndDeviceEnum = "ROOM";
        // }
        v.showImg =
          this.dataType == "room" || v.engineroomAndDeviceEnum == "ROOM";
        v.parentId = parentId;
        //  v.engineroomAndDeviceEnum == "ROOM" 不可选中的条件 例如:不能选择机房
        if (this.disableFuc && this.disableFuc(v)) {
          this.disableValue.push(v.id);
        }

        if (v.subRooms && v.subRooms.length > 0) {
          v.subs = v.subRooms.concat(v.subs || []);
          this.initTree(v.subRooms, v.id);
        }

        // if(this.dataType == 'ele'){
        //     if (v.subs && v.subs.length > 0) {
        //       this.initTree(v.subs, v.id);
        //     }
        // }else{
        //     if (v.subRooms && v.subRooms.length > 0) {
        //        v.subs = v.subRooms
        //       this.initTree(v.subRooms, v.id);
        //     }
        // }
      });
    },
    handleChange(e) {
      this.deviceObj = e.obj;
      this.$emit("update:value", e.value[0] || "");
      this.$emit("select", e.obj[0]);
    },
    setFirstNode(tree, fuc) {
      // fuc 默认选中节点 (node)=>{return node.engineroomAndDeviceEnum == "DEVICE"} subs :子节点参数
      let first = treeTools.treeFind(tree, fuc, "subs");

      // 默认设置第一个
      if (first) {
        let treePath = treeTools.treeFindPath(
          tree,
          (node) => {
            return node.id == first.id;
          },
          [],
          "subs"
        );
        this.deviceValue = [first.id];
        this.deviceObj = [first];
        this.defaultExpand = treePath;
        this.handleChange({
          value: first.id,
          obj: this.deviceObj,
        });
      }
    },
    // 搜索
    onSearch(e) {
      let treeData = JSON.parse(this.orignData);
      if (e) {
        this.treeData = this.deal(treeData,(v)=>{return v.name.includes(e)});
        this.$refs.tree.toggleAll(true)
      } else {
        this.treeData = treeData;
        this.$refs.tree.toggleAll(false,'first')
      }
    },
    /**
     * 递归过滤节点，但保留原树结构，即符合条件节点的父路径上所有节点不管是否符合条件都保留
     * @param {Node[]} nodes 要过滤的节点
     * @param {node => boolean} predicate 过滤条件，符合条件的节点保留
     * @return 过滤后的根节点数组
     */
    deal(nodes, predicate) {
      // 如果已经没有节点了，结束递归
      if (!(nodes && nodes.length)) {
        return;
      }

      const newChildren = [];
      for (const node of nodes) {
        const subs = this.deal(node.subs, predicate);

        // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
        // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
        // 2. 自己本身符合条件
        if ((subs && subs.length) || predicate(node)) {
            node.subs = subs;
            newChildren.push(node);
        }
    }
      return newChildren.length ? newChildren : void 0;
    },
  },
  mounted() {
    this.curValue = this.value;
    this.init();
  },
  created() {
    // this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
};
</script>

<style scoped lang="less">
.roomList {
  width: 100%;
  max-width: 224px;
}
.room-menu-item {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  max-width: 224px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  margin-bottom: 8px;
  cursor: pointer;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  -webkit-touch-callout: none;
  user-select: none;
  &:hover,
  &.active {
    background: #ffffff;
    border: 1px solid #e4e7ed;
  }
}
.room-menu-item .img-room {
  width: 18px;
  height: 18px;
}
// .ant-menu {
//   background-color: inherit;
// }
// .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
//   background-color: #ffffff;
//   color: #303133;
// }
// .ant-menu-item:hover {
//   color: #303133;
// }
// .ant-menu-vertical {
//   border-right: none;
// }
// .ant-menu-item {
//   height: 36px;
//   margin: 0;
//   font-size: 14px;
//   border: 1px solid #e4e7ed;
//   display: flex;
//   align-items: center;
//   border-radius: 4px;
//   padding-left: 16px;
// }
.roomList {
  width: 100%;
  max-width: 224px;
  .lineBoxDev:last-child {
    // background: red;
    .line {
      height: 26px;
    }
  }
}
.rightIcon {
  position: absolute;
  right: 0;
  color: #c0c4cc;
}
.lineBox,
.lineBoxDev {
  float: right;
  position: relative;
  right: 0;
  width: 85%;
  overflow: inherit;
  &::before {
    content: "";
    display: block;
    background: #e4e7ed;
    width: 16px;
    height: 1px;
    position: absolute;
    left: -16px;
  }
  .line {
    content: "";
    display: block;
    background: #e4e7ed;
    width: 1px;
    height: 26px;
    position: absolute;
    left: -16px;
    top: -10px;
  }
}
.lineBoxDev {
  width: 70%;
  .line {
    height: 44px;
  }
}
.lineBoxDev2 {
  .line {
    height: 26px;
  }
}
.minH100 {
  min-height: 100%;
}
.text-right {
  text-align: right;
}
.p20 {
  padding: 20px;
}
.h100 {
  height: 100%;
}
.pointer {
  cursor: pointer;
}
.router-container,
.ant-menu {
  background-color: inherit;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #ffffff;
  color: #303133;
}
.ant-menu-item:hover {
  color: #303133;
}
.ant-menu-vertical {
  border-right: none;
}
.ant-menu-item {
  height: 36px;
  margin: 0;
  font-size: 14px;
  border: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding-left: 16px;
}
.devListItmeBox {
  // display: flex;
}
.devListItme {
  width: 278px;
  height: 124px;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #f0f2f5;
  padding: 16px 24px;
}
.devListItme:nth-child(3n) {
  // margin-right: 0;
}
.alBoxT {
  width: 58px;
  height: 24px;
  background: #f65f54;
  border-radius: 4px;
}
</style>
